<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
      <upload-file-tabin
        :name="item.name"
        :list="selectValue[item.name]"
        @change="onChange"
      ></upload-file-tabin>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'
import UploadFileTabin from './upload-file-tabin'

export default {
  components: {
    UploadFileTabin,
  },
  props: {
    value: {
      type: [Object, String],
      default: () => {},
    },
  },
  data() {
    return {
      tabs: [
        {
          label: '产品视频',
          name: '1',
        },
        {
          label: '规格书',
          name: '2',
        },
        {
          label: '用户手册',
          name: '3',
        },
        {
          label: '集成手册',
          name: '4',
        },
        {
          label: 'SDK',
          name: '5',
        },
      ],
      activeName: '1',
      selectValue: {},
    }
  },
  computed: {},
  watch: {
    value: {
      handler(val) {
        this.selectValue = _clonedeep(val)
      },
      immediate: true,
    },
  },
  methods: {
    onChange(vals) {
      this.selectValue[this.activeName] = vals
      this.$emit('input', _clonedeep(this.selectValue))
    },
    handleClick(e) {
      this.activeName = e.name
    },
  },
}
</script>

<style lang="less" scoped></style>
